<template>
  <div id="" class="paging info">
    <el-pagination
        :small="Boolean(isSmall)"
        background
        :page-size="this.pageSize"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="totalNumber">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  // props: {
  //   total: {
  //     type: Number,
  //     default: 0
  //   }
  // },
  props: ['total', 'pageSize', 'isSmall'],
  computed: {
    totalNumber () {
      // this.total : 0
      return this.total ? parseInt(this.total) : 0
    }
  },
  data () {
    return {
      number: ''
    }
  },
  methods: {
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.$emit('handleCurrentChange', val)
    }
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
  .info {
    .select {
      width: 52px;
      height: 35px;
    }

    .select /deep/ .el-input__inner {
      padding-left: 5px;
      padding-right: 0;
    }

    .select /deep/ .el-input__icon {
      width: 15px;
    }

    .select /deep/ .el-select__caret {
      /*transform:rotate(270deg);*/
      /*color: black;*/
    }

    .select /deep/ .el-select__caret.is-reverse {

    }
  }

  .paging {
    /*background-color: pink;*/
    text-align: right;
    padding-right: 30px;

    & /deep/ .el-pagination.is-background .btn-prev {
      background: none;
      border: 1px solid rgba(0, 255, 255, 1);
    }

    & /deep/ .el-pagination.is-background .btn-next {
      background: none;
      border: 1px solid rgba(0, 255, 255, 1);
    }

    & /deep/ .el-pager li {
      background: none;
      border: 1px solid rgba(0, 255, 255, 1);
    }

    & /deep/ .el-pagination__total, & /deep/ .el-pagination__sizes {
      float: left;
      font-size: 1.6rem;
      height: 35px;
      line-height: 35px;
    }

    & /deep/ .el-input__inner {
      /*width:52px;*/
      height: 35px;
    }

    & /deep/ .el-input__icon {
      /*width: 20px;*/
      /*line-height: 3;*/
    }

    & /deep/ .el-input .el-input__inner {
      padding-right: 20px;
      color: #FFFFFF;
      font-size: 1.6rem;
    }
  }
</style>
